<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>span标签</title>
</head>

<body>
    <h1>html5语义化标签</h1>
    <h2>span标签</h2>
    <p>&lt;span&gt;标签是文本中的区块标签，没有任何显示的效果，可以结合CSS来定位区块的样式</p>

    <p>
        商品价格：<span>58</span>元，优惠价格：<span>48</span>元
    </p>

    <h2>文本格式化标签</h2>
    <h3>strong</h3>
    <p>表示特别重要的内容，粗体显示</p>
    <p>这是一个非常<strong>重要</strong>的内容</p>

    <h3>em</h3>
    <p>表示强调的内容,斜体显示</p>
    <p>这是一个<em>强调</em>的内容</p>

    <h3>mark</h3>
    <p>表示高亮显示的内容</p>
    <p>这是一个<mark>高亮</mark>的内容</p>

    <h3>del</h3>
    <p>表示被删除的内容，通常显示为删除线</p>
    <p>这是一个<del>被删除</del>的内容</p>

    <h3>ins</h3>
    <p>表示被插入的内容，通常显示为下划线</p>
    <p>这是一个<ins>被插入</ins>的内容</p>

    <h3>u</h3>
    <p>表示需要强调的内容，通常显示为下划线,已经被css替代</p>
    <p>这是一个<u>需要强调</u>的内容</p>

    <h3>small</h3>
    <p>表示次要的内容，通常显示为小号字体,用于添加版权信息&copy;copy和免责声明</p>
    <p><small>用于添加版权信息&copy;copy 2025-2030和免责声明</small></p>

    <h3>sub</h3>
    <p>表示下标内容</p>
    <p>化学式：H<sub>2</sub>O</p>

    <h3>sup</h3>
    <p>表示上标内容</p>
    <p>数学表达式：x<sup>2</sup> + y</p>

    <h3>pre</h3>
    <p>表示预格式化文本，保留空格和换行</p>
    <div>
        <pre>
        function helloWorld() {
            console.log("Hello, World!");
        }
    </pre>
    </div>

    <h3>code</h3>
    <p>表示代码片段，通常使用等宽字体显示</p>
    <p>
        这是一个
        <code>
            console.log("Hello, World!");
        </code>
    </p>

    <h3>kbd</h3>
    <p>表示键盘输入的内容</p>
    <p>按下 <kbd>Ctrl + C</kbd> 复制内容</p>

    <h3>samp</h3>
    <p>表示计算机输出的样本内容</p>
    <p>程序输出：<samp>Hello, World!</samp></p>

    <h3>var</h3>
    <p>表示变量名</p>
    <p>数学表达式：<var>x</var> + <var>y</var></p>

    <h3>abbr</h3>
    <p>表示缩写词</p>
    <p><abbr title="HyperText Markup Language">HTML</abbr> 是一种标记语言</p>

    <h3>q</h3>
    <p>表示短引用的内容</p>
    <p>他说：<q>学习HTML很有趣！</q></p>

    <h3>blockquote</h3>
    <p>表示长引用的内容</p>
    <div>
        <blockquote cite="http://www.xxxx.com">
            学习HTML不仅能帮助你创建网页，还能提升你的逻辑思维能力。
        </blockquote>
    </div>

    <h3>cite</h3>
    <p>表示引用的作品名称</p>
    <p>这本书的名字是<cite>《HTML与CSS设计与构建网站》</cite></p>

    <h3>dfn</h3>
    <p>表示定义的内容</p>
    <p><dfn>HTML</dfn> 是超文本标记语言的缩写</p>

    <h3>b</h3>
    <p>表示加粗文本，但没有特别的语义意义</p>
    <p>这是一个<b>加粗</b>的文本</p>

    <h3>i</h3>
    <p>表示斜体文本，但没有特别的语义意义</p>
    <p>这是一个<i>斜体</i>的文本</p>

    <h3>figure,figcaption</h3>
    <p>figure用于标记图像、图表等媒体内容，figcaption用于为figure添加标题或说明</p>
    <div>
        <figure>
            <img src="./images/kele.jpg" alt="示例图片" width="200" height="200">
            <figcaption>这是图片的说明文字</figcaption>
        </figure>
    </div>

    <h3>time</h3>
    <p>表示时间或日期</p>
    <p>会议时间：<time datetime="2024-07-01T10:00">2024年7月1日 10:00 AM</time></p>
</body>

</html>